<template>
    <div class="organization-management">
        <div class="header">
            <el-form :model="searchForm" :inline="true">
                <el-form-item label="组织名称">
                    <el-input v-model="searchForm.orgName" placeholder="组织名称" clearable class="search-input" />
                </el-form-item>
                <el-form-item>
                    <el-button @click="handleSearchOrg">查询</el-button>
                    <el-button @click="resetSearchForm">重置</el-button>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="handleAddOrg" style="margin-left: auto;">添加公司</el-button>
        </div>
        <div class="cont">
            <el-table :data="organizationList" border style="width: 100%" stripe>
                <el-table-column prop="name" label="组织名称" />
                <el-table-column prop="type" label="组织类别" />
                <el-table-column prop="code" label="组织编号（社会信用代码）" />
                <el-table-column prop="contact" label="联系人" />
                <el-table-column prop="phone" label="联系电话" />
                <el-table-column prop="site" label="权限电站" />
                <el-table-column prop="status" label="状态">
                    <template #default="scope">
                        <el-switch v-model="scope.row.status" active-text="启用" inactive-text="禁用" inline-prompt
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                            @change="handleOrgStatusChange(scope.row)" />
                    </template>
                </el-table-column>
                <el-table-column label="权限">
                    <template #default="scope">
                        <el-button type="text" @click="handleEditOrg(scope.row)">编辑</el-button>
                        <el-button type="text" @click="handleDeleteOrg(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <Pagination v-model:current-page="orgPagination.currentPage" v-model:page-size="orgPagination.pageSize"
            :total="orgPagination.total" @size-change="handleOrgSizeChange" @current-change="handleOrgPageChange" />
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import Pagination from '@/components/Pagination.vue';

// 搜索表单
const searchForm = ref({
    orgName: ''
});

// 组织列表数据
const organizationList = ref([
    {
        name: '中国国际金融股份有限公司',
        type: '内资公司',
        code: '33916007562868800000',
        contact: '赵学海',
        phone: '15116042175',
        site: '-',
        status: true,
    },
    {
        name: '中国国际金融股份有限公司',
        type: '内资公司',
        code: '33916007562868800000',
        contact: '赵学海',
        phone: '15116042175',
        site: '-',
        status: true,
    },
    {
        name: '中国国际金融股份有限公司',
        type: '内资公司',
        code: '33916007562868800000',
        contact: '赵学海',
        phone: '15116042175',
        site: '-',
        status: true,
    }
]);

// 分页配置
const orgPagination = ref({
    total: 100,
    pageSize: 10,
    currentPage: 1
});

// 搜索组织
const handleSearchOrg = () => {
    console.log('搜索组织:', searchForm.value.orgName);
};

// 重置搜索表单
const resetSearchForm = () => {
    searchForm.value.orgName = '';
    console.log('重置搜索条件');
};

// 添加公司
const handleAddOrg = () => {
    console.log('添加公司');
};

// 编辑组织
const handleEditOrg = (row: any) => {
    console.log('编辑组织:', row);
};

// 删除组织
const handleDeleteOrg = (row: any) => {
    console.log('删除组织:', row);
};

// 修改组织状态
const handleOrgStatusChange = (row: any) => {
    console.log('组织状态变更:', row);
};

// 每页条数变化
const handleOrgSizeChange = (size: number) => {
    orgPagination.value.pageSize = size;
    console.log('每页条数:', size);
};

// 页码变化
const handleOrgPageChange = (page: number) => {
    orgPagination.value.currentPage = page;
    console.log('当前页:', page);
};
</script>

<style lang="scss" scoped>
.organization-management {
    :deep(.el-form-item) {
        margin-bottom: 0;
        .el-form-item__label{
            line-height: 0.4rem;
        }
    }

    .header {
        display: flex;
        align-items: center;
        padding: 0.12rem 0.16rem;

        .search-input {
            width: 2rem;
        }
    }

    .cont {
        background: #fff;
        padding: 0 0.16rem 0.24rem;
        min-height: 75vh;
    }
}
</style>
